<template>
  <div class="play-list-container">
    <!-- 分类 -->
    <!-- <yin-nav :styleList="songStyle" :activeName="activeName" @click="handleChangeView"></yin-nav> -->
    
    <!-- 歌曲列表 -->
    <play-list :playList="data" path="song"></play-list>
    
    <!-- 分页导航条 -->
    <el-pagination
      class="pagination"
      background
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="allPlayList.length"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
// import YinNav from "@/components/layouts/YinNav.vue";
import PlayList from "@/components/PlayList.vue";
import { SONGSTYLE } from "@/enums";
import { HttpManager } from "@/api";
import { useStore } from "vuex";

export default defineComponent({
  components: {
    // YinNav,
    PlayList,
  },
  setup() {
    // const activeName = ref("全部歌曲");
    const pageSize = ref(15); // 页数
    const currentPage = ref(1); // 当前页
    const songStyle = ref(SONGSTYLE); // 歌单导航栏类别
    const allPlayList = ref([]); // 歌单
    const data = computed(() => allPlayList.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value));
    const store = useStore();
    const userId = computed(() => store.getters.userId);
    // 获取全部歌单
    async function getSongList() {
      //调用获取歌曲列表接口
      allPlayList.value = ((await HttpManager.getRecommendSongList(userId.value)) as ResponseBody).data;
      currentPage.value = 1;
    }

    try {
      getSongList();
    } catch (error) {
      console.error(error);
    }
    
    // 获取当前页
    function handleCurrentChange(val) {
      currentPage.value = val;
    }
    return {
      songStyle,
      pageSize,
      currentPage,
      allPlayList,
      data,
      handleCurrentChange,
    };
  },
});
</script>
